@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {

.left{display: none;}
.top{height: 4vh;overflow: hidden;}
.media{clear: both;transform: translateX(10vw) scale(1.82,1) ;overflow-x: hidden;}
.media p,.media a,.media h2,.media svg,.media li,.media img, .media input{transform: scale(1,1.82);}
}


@media only screen and (min-device-width : 480px){
}
@font-face{
	font-family: 'ops';
	src:url('./OPS.ttf');
}
*{margin: 0;padding: 0;font-family: "ops";transition: opacity 0.4s linear 0s,width 0.4s linear 0s,background-color 0.4s linear 0s,width 0.4s linear 0s,color 0.4s linear 0s,background 0.4s linear 0s,height 0.4s linear 0s;}

body{
	overflow: hidden;
	background-color: #262626;
	background-image: url(../img/jnba.png);
	background-size: 100vw 92vh;
	background-position:bottom;
}
.top{
	width: 100vw;
	height: 8vh;
	background-color: #262626;
	box-shadow:  -0.3125rem 0.3125rem 0.3125rem rgba(0,0,0,0.2),
				 0.3125rem -0.3125rem 0.3125rem rgba(0,0,0,0.2);
}
.top>a{
	float: left;
	margin: 0px 1.25rem;
	font-family: 'ops';
	height: 4.6875rem;
	line-height: 4.6875rem;
	color: #f2f2f2;
	font-size: 1.375rem;
	text-decoration: none;
}
#tfirst{
	margin: 0.625rem 0.625rem 0 0.625rem ;
}
#tsecond{
	float: right;
}
#tthird{
	float: right;
	margin: 0px 1.25rem 0px 5rem;
}
.content{
	position: absolute;
	transform: translateX(12.5vw);
	height: 92vh;
}
.content:after {
            content: "";
            clear: left;
            display: block;
        }
.media{
	overflow-y: scroll;
	height: 92vh;
	float: left;
	margin: 0 auto;
	width: 55vw;
	background-color: #262626;
	background-image: url(../img/mediatree/jntree.png);
	background-size: auto 100%;
	background-position: center;
}
.media::-webkit-scrollbar {
    display: none;
}
#t1{position: absolute;width:85%;height: auto;left: 15%;top: -20%;}
#t2{position: absolute;width:100%;height: auto;}

.left{
	position: relative;
	transform: translateY(2.5vh);
	float: left;
	width: 10vw;
}
.left #l{
	overflow: hidden;
	height: 5vh;
	width: 10vw;
	border-radius:0.125rem 0 0 1.5625rem;
	background: rgba(38,38,38,0);
	box-shadow:  -0.3125rem 0.3125rem 0.3125rem rgba(0,0,0,0.2), 
				 0.3125rem -0.3125rem 0.3125rem rgba(0,0,0,0.2);
	margin-bottom: 2.5vh;
}
.left .lc{
	border-radius:0 1.5625rem 0.125rem 0;
	display: inline-block;
	width: 4vw;
	height: 3.125rem;
}
.lc#lc1{
	background: #262626;
}
#al1:hover>#l>#lc1{width: 10vw;}
.lc#lc2{
	background: #4d0500;
}
#lc5{width: 12vw;}
#al2:hover>#l>#lc2{width: 10vw;}
.lc#lc3{
	background: #1d1e5c;
}
#al3:hover>#l>#lc3{width: 10vw;}
.lc#lc4{
	background: #003000;
}
#al4:hover>#l>#lc4{width: 10vw;}
.lc#lc5{
	background: #002a45;
}
#al5:hover>#l>#lc5{width: 10vw;}
.lc#lc6{
	background: #3d0c4f;
}
#al6:hover>#l>#lc6{width: 10vw;}
.left p{
	position: fixed;
	color: #f2f2f2;
	margin: -5.5vh 0 0 5vw;
	font-size: 1.1vw;
	vertical-align:middle;
	line-height: 5vh;
	height: 5vh;
}
.top a:hover{
	color: #2fc7cc;
}
